<template>
  <div class="wrapper">
    <van-nav-bar
      class="header"
      :fixed="true"
      left-arrow
      title="选择出行人"
      :border="false"
      @click-left="onBack"
    >
      <template #right>
        <div class="header-right" @click="addOutPeople">
          <van-icon name="add" color="rgb(32, 140, 255)" />
          <span>外部出行人</span>
        </div>
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="searchWapper" @click="openSearchTraveler">
        <van-search placeholder="查询出行人" disabled shape="round" />
      </div>
      <div class="change-people-tips">
        若为公司员工预订，可使用“查询出行人”
        功能或在下方列表中勾选；若为非员工预订，可手动新增出行人信息。
      </div>
      <div class="collapse">
        <div class="d-flex justify-content-between van-hairline--bottom">
          <div class="title">
            我的常旅客
          </div>
          <van-icon
            @click="toggleList"
            class="collapseIcon"
            :name="showPeopleList ? 'arrow-down' : 'arrow'"
          />
        </div>
        <template translate="yes" v-if="showPeopleList">
          <CommonPassengerPeopleList
            v-for="item in state.common_passenger_book_list"
            :key="item.id"
            :list="item"
            :num="state.change_people_list.length"
            :total="18"
            @getChangePeople="getChangePeople"
            @delSuccess="getTripPeople"
          />
        </template>
      </div>
    </div>

    <router-view
      v-slot="{ Component }"
      @getSearchPeople="getSearchPeople"
      @getSearchHistoryPeople="getSearchHistoryPeople"
      @addSuccess="getTripPeople"
    >
      <transition name="van-slide-right">
        <component :is="Component"></component>
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
import CommonPassengerPeopleList from "./CommonPassengerPeopleList/CommonPassengerPeopleList.vue";
const router = useRouter();
const route = useRoute();

const store = useStore();
const { proxy } = getCurrentInstance();
const emit = defineEmits(["commitTripPeople"]);
const props = defineProps({
  trip_people_list: {
    type: Array
  }
});
const showPeopleList = ref(true);
const toggleList = () => {
  showPeopleList.value = !showPeopleList.value;
};

const state = reactive({
  common_passenger_book_list: [], //常旅客信息数组
  // trip_department_list: [], // 公司同事信息数组
  change_people_list: []
  // people_show: false
});

onMounted(async () => {
  await getTripPeople();
});

// 查询常旅客及公司同事
const getTripPeople = async () => {
  const url = "/security/v1/commonPassenger/queryCommonPassengerInfos";
  const data = {
    contact_member_id: localStorage.memberId, //当前登陆人memberId
    is_private: store.state.publicAndPrivateFlag === "0" ? false : true, //因公false  因私true
    business_type: 3
  };
  let res = await proxy.$axiosJson(url, data);
  if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
    if (res.data.common_passenger_book_infos) {
      state.common_passenger_book_list = res.data.common_passenger_book_infos;
      state.change_people_list = [];
      if (props.trip_people_list && props.trip_people_list.length != 0) {
        state.change_people_list = props.trip_people_list;
        state.change_people_list.forEach(item => {
          state.common_passenger_book_list.forEach(val => {
            if (item.member_id == val.member_id) {
              val.check = true;
            }
          });
        });
      }
    }
    if (store.state.configureInfo.hotel_cost_center_substitut === "0") {
      // 不自动带入成本中心
      state.common_passenger_book_list.forEach(passenger => {
        passenger.cost_center_id = "";
        passenger.cost_name = "";
      });
    }
  }
};

// 添加外部出行人
const addOutPeople = () => {
  if (route.name == "HotelBookTripPeople") {
    router.push({
      path: "/hotelBook/tripPeople/addTripPeople"
    });
  } else {
    router.push({
      path: "/home/tripPeople/addTripPeople"
    });
  }
};

// 获取已经选中的人
const getChangePeople = val => {
  val.active_type = "常旅客";
  state.change_people_list = [val];
  sure();
};

// 删除已经选中的人
const delPeople = (item, index) => {
  state.change_people_list.splice(index, 1);
  state.common_passenger_book_list.forEach(list => {
    if (item.member_id == list.member_id) {
      list.check = false;
    }
  });
};

// 点击查询出行人
const openSearchTraveler = () => {
  store.commit("SET_CHANGE_PEOPLE_LIST", state.change_people_list);
  if (route.name == "HotelBookTripPeople") {
    router.push({
      path: "/hotelBook/tripPeople/searchTripPeople"
    });
  } else {
    router.push({
      path: "/home/tripPeople/searchTripPeople"
    });
  }
};

// 搜索出行人选择的数据
const getSearchPeople = val => {
  state.change_people_list = val;
  sure();
};

// 历史出行人选择的数据
const getSearchHistoryPeople = val => {
  state.common_passenger_book_list.forEach(item => {
    if (item.member_id == val.member_id) {
      item.check = true;
    }
  });
  let isAdd = true;
  for (let i = 0; i < state.change_people_list.length; i++) {
    if (state.change_people_list[i].member_id == val.member_id) {
      isAdd = false;
      break;
    }
  }
  if (isAdd) {
    state.change_people_list.push(val);
  }
};

// 常旅客列表选择出行人确认
const getConfirmPassengerSurePeople = async () => {
  let changlvke = [];
  let tongshi = [];
  state.change_people_list.forEach(item => {
    if (item.active_type == "常旅客") {
      changlvke.push(item.common_passenger_certificates[0].uuid);
    } else {
      tongshi.push(item.member_id);
    }
  });
  const url = "/security/v1/commonPassenger/confirmPassenger";
  const data = {
    member_id: localStorage.memberId,
    confirm_certificate_ids: changlvke,
    confirm_member_ids: tongshi
  };

  await proxy.$axiosJson(url, data);
};

const sure = async () => {
  await getConfirmPassengerSurePeople();
  emit("commitTripPeople", state.change_people_list);
  router.back();
};

const onBack = () => {
  router.back();
};
</script>

<style lang="less" scoped>
.wrapper {
  :deep(.header) {
    position: static;
    box-shadow: 0px 0px 11px -3px rgba(0, 0, 0, 0.33);
    .van-icon {
      color: #000000;
    }
    .header-right {
      .sc(14px, #208cff);
      font-weight: 500;
    }
  }
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f7f7f7;
  z-index: 11000;
  .content {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    .collapse {
      background: #fff;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 36px;
        padding-left: 15px;
      }
      .collapseIcon {
        font-size: 18px;
        font-weight: 500;
        padding-right: 15px;
        color: #8f8f8f;
        line-height: 36px;
      }
    }

    .searchWapper {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.2);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 8px -4px rgba(0, 0, 0, 0.2);
    }
    .change-people-tips {
      padding: 9px 12px;
      font-size: 12px;
      color: #e65133;
      line-height: 18px;
    }
    .button {
      position: fixed;
      bottom: 0;
      height: 48px;
      width: 100%;
      line-height: 48px;
      .sure-button {
        width: 100%;
        text-align: center;
        background: #fe8f00;
        .sc(14px, #fff);
        font-weight: 600;
      }
    }
  }
  .change-trip-people {
    max-height: 148px;
    overflow-y: scroll;
    padding: 10px 12px;
    .people-list {
      position: relative;
      padding: 12px 9px;
      margin: 5px;
      width: 22%;
      height: 55px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #208cff;
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      line-height: 14px;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 5px;
      }
      .department-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 500;
        color: #7c7b7b;
        line-height: 12px;
      }
      .del-people {
        position: absolute;
        top: -5px;
        right: -5px;
        color: #d8dbe1;
      }
    }
  }
}
</style>
